<script setup>
import { onMounted, ref } from 'vue'
import addAndUpdateView from './addAndUpdate.vue'
import { getGoodsList } from '@/api/goods'
import { getCategoryList } from '@/api/category'
import { ElMessage } from 'element-plus';
const goodstableData = ref([])
const queryForm = ref({
  title: '',
  categoryId3: ''
})
//级联选择类别
const props = {
  expandTrigger: 'hover',
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false,
  checkStrictly: false
}
const options = ref([])
const categoryList = () => {
  getCategoryList().then(res => {
    options.value = res.data
  })
}
const handleChange = (value) => {
  queryForm.value.categoryId3 = value
  console.log(value)
}
// 分页
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const handleSizeChange = (val) => {
  currentPage.value = 1
  pageSize.value = val
  getData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getData()
}
// 数据转换函数，将后端数据转换为树形结构
const transformData = (data) => {
  return data.map(item => {
    // 父节点数据
    const parentRow = {
      id: item.id,
      title: item.title,
      subTitle: item.subTitle,
      categoryId3: item.categoryId3,
      description: item.description,
      content: item.content,
      brandId: item.brandId,
      supplierId: item.supplierId,
      hasChildren: true, // 标识为父节点
      children: item.children || []
    }

    // 处理子节点数据
    const childrenRows = item.children?.map(child => ({
      id: child.id,
      price: child.price,
      realPrice: child.realPrice,
      code: child.code,
      title: child.title,
      unit: child.unit,
      productWeight: child.productWeight,
      productLength: child.productLength,
      productWidth: child.productWidth,
      productHeight: child.productHeight,
      productVolume: child.productVolume,
      updateTime: child.updateTime,
      updateBy: child.updateBy,
      spuId: child.spuId 
    })) || []

    return {
      ...parentRow,
      children: childrenRows
    }
  })
}
const getData = async () => {
  let res = await getGoodsList(currentPage.value, pageSize.value, queryForm.value.title, queryForm.value.categoryId3)
  goodstableData.value = transformData(res.data.rows)
  total.value = res.data.total
}
const cancle = () => {
  queryForm.value = { title: '', categoryId3: '' }
  getData()
}
const addAndUpdate = ref(null)
const add = () => {
  addAndUpdate.value.dialogVisible = true
  addAndUpdate.value.title = '添加商品：'
  addAndUpdate.value.clear()
}
const handleEdit = (row) => {
  addAndUpdate.value.dialogVisible = true
  addAndUpdate.value.formGoods = { ...row }
  // console.log( addAndUpdate.value.formGoods);
  // addAndUpdate.value.goodsTableData = {...row.children}
  addAndUpdate.value.goodsTableData = row.children ? [...row.children] : []
  // console.log(addAndUpdate.value.goodsTableData);
  addAndUpdate.value.title = '修改商品：'
}
const handleDelete = (row) => {
  console.log("删除");
}
onMounted(() => {
  categoryList()
  getData()
})
</script>
<template>
  <h2>商品列表</h2>
  <!-- 搜索表单 -->
  <el-form :inline="true" :model="queryForm" label-width="100px">
    <!-- <el-form-item label="商品条码：" style="width: 235px;">
      <el-input v-model="queryForm.code" placeholder="请输入商品条码"></el-input>
    </el-form-item> -->
    <el-form-item label="商品名称：" style="width: 235px;">
      <el-input v-model="queryForm.title" placeholder="请输入商品名称"></el-input>
    </el-form-item>
    <el-form-item label="商品类别：" style="width: 266px;">
      <el-cascader v-model="queryForm.categoryId3" :options="options" :props="props" @change="handleChange" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getData">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="default" @click="cancle">清空</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="add"> + 新增商品</el-button>
    </el-form-item>
  </el-form>
  <!-- 商品列表显示 -->
  <el-table border :data="goodstableData" style="width: 100%;" row-key="id">
    <!-- <el-table-column fixed prop="id" label="商品ID" width="70" align="center" /> -->
    <el-table-column fixed prop="id" label="#" width="70" align="center" />
    <el-table-column prop="title" label="商品标题" width="100" align="center" />
    <el-table-column prop="subTitle" label="副标题" width="100" align="center" />
    <el-table-column prop="categoryId3" label="商品类别" width="100" align="center" />
    <el-table-column prop="description" label="商品描述" width="100" align="center" show-overflow-tooltip />
    <el-table-column prop="content" label="商品详情" width="100" align="center" show-overflow-tooltip />
    <el-table-column prop="brandId" label="品牌ID" width="100" align="center" />
    <el-table-column prop="supplierId" label="供应商ID" width="100" align="center" />
    <el-table-column prop="price" label="单价" width="100" align="center" />
    <el-table-column prop="realPrice" label="真实价格" width="100" align="center" />
    <el-table-column prop="code" label="商品条码" width="100" align="center" />
    <el-table-column prop="unit" label="商品单位" width="100" align="center" />
    <el-table-column prop="productWeight" label="商品重量" width="100" align="center" />
    <el-table-column prop="productLength" label="商品长度" width="100" align="center" />
    <el-table-column prop="productWidth" label="商品宽度" width="100" align="center" />
    <el-table-column prop="productHeight" label="商品高度" width="100" align="center" />
    <el-table-column prop="productVolume" label="商品体积" width="100" align="center" />
    <el-table-column prop="updateTime" label="修改时间" width="100" align="center" />
    <!-- <el-table-column prop="updateBy" label="修改人账号" width="100" align="center" /> -->
    <el-table-column fixed="right" label="操作" width="150" align="center">
      <template #default="scope">
        <div v-if="!scope.row.spuId">
          <el-button @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
        </div>
        <div v-else>
          <el-tooltip content="子规格无法直接操作，请编辑父级商品" placement="top">
            <el-icon color="#E6A23C" size="large">
              <WarningFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <br />
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper" :total="total" background=true @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
  <addAndUpdateView ref="addAndUpdate" @getData="getData"></addAndUpdateView>
</template>
<style scoped></style>